<template>
<div>
    <h2>用户管理</h2>
<div>

    <div style="margin-top: 15px; width: 420px">
        <el-input placeholder="请输入查询关键字" name="userName"  v-model="userName" class="input-with-select">

            <el-button slot="append" @click="showList"  icon="el-icon-search"></el-button>
        </el-input>
        <el-button slot="append" @click="showList1"   icon="el-icon-search">显示所有用户</el-button>
    </div>
</div>

    <hr/>
    <div>
        <el-table
                :data="ulist"
                style="width: 90%; margin: auto"
                max-height="500">
            <el-table-column
                    fixed
                    prop="userId"
                    label="ID"
                    width="90">
            </el-table-column>
            <el-table-column
                    fixed
                    prop="userName"
                    label="用户名"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="userPassword"
                    label="密码"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="userMobile"
                    label="电话"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="userEmail"
                    label="邮箱"
                    width="230">
            </el-table-column>
            <el-table-column
                    prop="closeTime"
                    label="登录时间"
                    width="230">
            </el-table-column>

            <el-table-column
                    fixed="right"
                    label="操作"
                    width="200">
                <template slot-scope="scope">
                    <el-button @click="deleteUser(scope.$index, scope.row)" size="small">删除用户</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <hr/>     
    <div class="block" style="margin-left: 550px;" >
        当前<span v-text="pageNum"></span>页/共<span v-text="pages"></span>页
        总计<span v-text="total"></span>条
        <a href="javascript:void(0)"   @click="go(1)">首页&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;</a>
        <a href="javascript:void(0)"@click="go(prePage)">上一页 &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;</a>
        <a href="javascript:void(0)"@click="go(nextPage)">下一页 &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;</a>
        <a href="javascript:void(0)"@click="go(pages)">尾页</a>

    </div>
</div>
</template>

<script>


    export default {

        name: "Comment",

        data() {
            return {
                userName: '',
                ulist: [],

                pageNum: 1,
                total: 0,
                pageSize: 8,
                pages: 0,
                prePage: 1,
                nextPage: 1
            }
        },
        created() {
            this.showList()

        },
        methods: {
            showList(){
                let url = this.$baseURL.dev + "/user/list"
                this.axios.get(url,{
                    params:{
                        userName:this.userName,
                        pageNum: this.pageNum,
                        pageSize: this.pageSize
                    }
                })
                    .then((res) => {

                        this.ulist = res.data.data.list;
                        this.pageNum = res.data.data.pageNum;
                        this.total = res.data.data.total;
                        this.pageSize = res.data.data.pageSize;
                        this.pages = res.data.data.pages;
                        this.prePage = res.data.data.prePage;
                        this.nextPage = res.data.data.nextPage;
                    })
            },
            showList1(){
                 this.userName = "";
                this.showList();
            },


            go(num) {
                let url = this.$baseURL.dev + "/user/list";
                this.axios.get(url, {
                    params: {
                        inputByUser:this.inputByUser,
                        select:this.select,
                        pageNum: num,
                        pageSize: this.pageSize,
                    }
                }).then((res) => {
                    this.ulist = res.data.data.list;
                    this.pageNum = res.data.data.pageNum;
                    this.total = res.data.data.total;
                    this.pageSize = res.data.data.pageSize;
                    this.pages = res.data.data.pages;
                    this.prePage = res.data.data.prePage;
                    this.nextPage = res.data.data.nextPage;


                })
            },
            deleteUser(index, row) {
                let userId = row.userId
                console.log(userId);
                let url3 = this.$baseURL.dev + "/user/delete/";
                this.axios.post(url3+userId)
                    .then((res)=>{
                        if(res.data.code==200){
                            alert(res.data.msg)
                            this.showList();
                        }else{
                            alert(res.data.msg)
                        }

                    })
            }
        }
    }
</script>

<style scoped>

</style>